/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
  <view class="index_class">
    <view class="edit-address">
      <form action class="new_from" style="display: block;">
		  
		<u-form-item :label="$t('收货人')" label-width="150">
			<u-input v-model="addresinfo.contacts" :placeholder="$t('请填写收货人姓名')" />
		</u-form-item>
		
		<u-form-item :label="$t('联系电话')" label-width="150">
			<u-input v-model="addresinfo.phone" :placeholder="$t('请填写联系电话')" />
		</u-form-item>
		
		<u-form-item :label="$t('所在地区')" label-width="150" @click="showRegionPicker">
			<view @click="showRegionPicker" >
				<input style="pointer-events: none;" disabled type="text" v-model="provinceCityArea" placeholder="选择省市区县" />
			</view>
		</u-form-item>
		
		<u-form-item :label="$t('详细地址')" label-width="150">
			<u-input type="textarea" v-model="addresinfo.address" :placeholder="$t('街道,楼牌号等')"/>
		</u-form-item>
		
		<u-form-item :label="$t('设置默认')" label-width="150">
          <switch :checked="addresinfo.is_default" @change="switch2Change" />
		</u-form-item>
		
      </form>
      <view class="add_btn">
        <button class="cash_btn" @click="NewAddress">{{$t('保存地址')}}</button>
      </view>
    </view>
	<u-picker mode="region" ref="uPicker" :area-code='[provinceInfo.idcode, cityInfo.idcode, areaInfo.idcode]' v-model="showRegion" @confirm="confirm"/>
  </view>
</template>

<script>
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker'
export default {
  components: {
    mpvuePicker
  },
  data() {
    return {
      mode: 'selector',
      addresinfo: {},
      provinceInfo: {
		  idcode:'11',
		  id:'',
		  pro_name:'',
		  code:'',
	  },
      cityInfo: {
		  idcode:'1101',
		  id:'',
		  city_name:'',
		  code:'',
	  },
      areaInfo: {
		  idcode:'110101',
		  id:'',
		  area_name:'',
		  code:'',
	  },
	  
	  showRegion:false,
	  provinceCityArea:"",
    }
  },
  onLoad(option) {
    console.log(option)
  },
  onShow() {
  },
  computed: {
  },
  watch: {
  },
  methods: {
	confirm(e){
		console.log(e);
		this.provinceInfo.idcode=e.province.value
		this.cityInfo.idcode=e.city.value
		this.areaInfo.idcode=e.area.value
		this.provinceInfo.id=this.padZero(e.province.value,6)
		this.cityInfo.id=this.padZero(e.city.value,6)
		this.areaInfo.id=this.padZero(e.area.value,6)
		this.provinceInfo.pro_name=e.province.label
		this.cityInfo.city_name=e.city.label
		this.areaInfo.area_name=e.area.label
		this.provinceInfo.code=this.padZero(e.province.value,6)
		this.cityInfo.code=this.padZero(e.city.value,6)
		this.areaInfo.code=this.padZero(e.area.value,6)
		this.provinceCityArea = e.province.label +" "+ e.city.label +" "+ e.area.label
	},
	//字符串末尾补零
	padZero(num, n) {
		var len = num.toString().length;
		while(len < n) {
			num = num+"0";
			len++;
		}
		return num;
	},	
	showRegionPicker(e) {
		this.showRegion = true;
	},
	
    NewAddress() {
      if (!this.addresinfo.contacts) {
        this.$toast(this.$t('请输入收货人姓名'));
        return false;
      }
      if (!this.addresinfo.phone) {
        this.$toast(this.$t('请输入联系人手机号'));
        return false;
      }
      if (!this.provinceInfo.id) {
        this.$toast(this.$t('请选择所在省份'));
        return false;
      }
      if (!this.cityInfo.id) {
        this.$toast(this.$t('请选择所在城市'));
        return false;
      }
      if (!this.areaInfo.id) {
        this.$toast(this.$t('请选择所在地区'));
        return false;
      }
      if (!this.addresinfo.address) {
        this.$toast(this.$t('请填写详细地址'));
        return false;
      }
      this.$http
          .getAddressadd({
            contacts: this.addresinfo.contacts,
            dz_id: this.addresinfo.id,
            phone: this.addresinfo.phone,
            address: this.addresinfo.address,
            is_default: this.addresinfo.is_default,
            pro_id: this.provinceInfo.id,
            city_id: this.cityInfo.id,
            area_id: this.areaInfo.id,
			province: this.provinceInfo.pro_name,
			city: this.cityInfo.city_name,
			area: this.areaInfo.area_name,
			datavalue: this.provinceCityArea
          })
          .then(res => {
            if (res.status == 200) {
              this.$toast(res.mess);
              setTimeout(r => {
                this.getback();
              }, 1500);
            }
          });
    },
	
    switch2Change(e) {
      this.addresinfo.is_default = e.detail.value ? 1 : 0;
    }
  }
};
</script>

<style>
page {
  height: 100%;
  background-color: #ffffff;
}
.edit-address{
	padding:0 20upx;
}
.index_class .edit-address{
  background-color: #ffffff;
}
</style>
